<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/1/8
  Time: 13:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>学生信息展示</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body >
<%--搜索栏--%>
<div class="demoTable">
    <div class="layui-inline">
        <input class="layui-input" placeholder="请输入学生姓名" name="name" id="name" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload" id="search">搜索</button>
</div>
<%--    table容器--%>
    <table class="layui-hide" id="test" lay-filter="test"></table>
<%--    定义头部工具栏模板   --%>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="insertStudent">新增学生信息</button>
            <button class="layui-btn layui-btn-sm" lay-event="deleteStudent">删除选中行</button>
        </div>
    </script>
<%--    定义行内按钮   --%>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>


<%--    form模板   --%>
    <form id="form1" style="display: none" class="layui-form" lay-filter="temForm"  action="${pageContext.request.contextPath}/stu/insertStudent" >
        <div class="layui-form-item">
            <input type="hidden" value="null" name="id">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入学生姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓别</label>
            <div class="layui-input-inline">
                <input type="text" name="sex" required lay-verify="required" placeholder="请输入学生姓别" autocomplete="off" class="layui-input">
            </div>
        </div><div class="layui-form-item">
        <label class="layui-form-label">生日</label>
        <div class="layui-input-inline">
            <input type="text" name="birthday" required lay-verify="required" placeholder="请输入学生生日" autocomplete="off" class="layui-input">
        </div>
    </div><div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-inline">
            <input type="text" name="tel" required lay-verify="required" placeholder="请输入学生手机号" autocomplete="off" class="layui-input">
        </div>
    </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</body>

<script>
    layui.use(['table','layer','jquery','form'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;
        table.render({
             elem: '#test'
            ,url:'${pageContext.request.contextPath}/stu/selectStudents'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,title: '学生信息表'
            ,cols: [[
                 {type: 'numbers', fixed: 'left'}
                ,{type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', width:300, unresize: true, sort: true, hide:true}
                ,{field:'name', title:'学生姓名', width:300}
                ,{field:'sex', title:'性别', width:300}
                ,{field:'birthday', title:'生日', width:300}
                ,{field:'tel', title:'电话号码', width:300}
                ,{fixed: 'right',title:'操作', toolbar: '#barDemo', width:120}
            ]]
            ,page: true
            ,limit:5
            ,limits:[3,5,10,15]
        });

        //点击搜索按钮执行重载
        $("#search").click(function (){
            //alert("1111")
            //执行重载
            table.reload('test', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    name: $("#name").val()
                }
            });
        })

        //头工具栏监听事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'insertStudent':
                    layer.open({
                        type: 1,
                        title: '新增学生信息',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['380px', '400px'],
                        content: $('#form1'), //iframe的url
                        success:function () {
                            $('#form1')[0].reset();
                        }
                    });
                    break;
                case 'deleteStudent':
                    var data = checkStatus.data;
                    var length = data.length;
                    var ids = new Array();
                    for (var i = 0; i < length; i++) {
                        ids[i]= data[i].id;
                    }
                    layer.confirm('确定要删除这'+length+'条学生信息吗？', {icon: 3, title: '提示'}, function (index) {
                        location.href="${pageContext.request.contextPath}/stu/deleteStudent?ids="+ids;
                        layer.close(index);
                    });
                    break;
                default:
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            var ida = new Array();
            ida[0] = data.id;
            if(obj.event === 'del'){
                layer.confirm('确定要删除'+data.name+'同学的记录吗？', {icon: 3, title: '提示'}, function (index) {
                    location.href="${pageContext.request.contextPath}/stu/deleteStudent?ids="+ida;
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    type: 1,
                    title: '修改'+data.name+'学生信息',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['380px', '400px'],
                    content: $('#form1'), //iframe的url
                    success:function () {
                        form.val('temForm',data);
                    }
                });
            }
        });
    });
</script>

<%--<script>
    /*
        使用layui中的
     */
    layui.use(['element','jquery','layer'], function() {
        var $ = layui.jquery;
        var element = layui.element;
        var layer = layui.layer;
        /*
            给修改按钮绑定点击事件
        */
        $(".btn1").click(function () {
            /*
                通过Jquery的方法给表单中的input框赋默认值
             */
            $("input[name='id']").val($(this).parent().parent().children().eq(0).text());
            $("input[name='name']").val($(this).parent().parent().children().eq(1).text());
            $("input[name='sex']").val($(this).parent().parent().children().eq(2).text());
            $("input[name='age']").val($(this).parent().parent().children().eq(3).text());
            $("input[name='tel']").val($(this).parent().parent().children().eq(4).text());
            //input here
            layer.open({
                type: 1,
                title: '修改学生信息',
                shadeClose: true,
                shade: 0.8,
                area: ['380px', '400px'],
                content: $('#form1'), //iframe的url
            });
            //input above
        });

        $(".btn2").click(function () {
            var id = $(this).parent().parent().children().eq(0).text();
            layer.confirm('is not?', {icon: 3, title: '提示'}, function (index) {
                //do something
                location.href="${pageContext.request.contextPath}/student/deleteStudent?id="+id;
                layer.close(index);
            });
        });
    });


</script>--%>
</html>
